<!-- 下单时选择优惠券 -->
<template>
	<view class="contentsCoupon mask" @click="close">
		<view class="contentList flex-box" @click.stop>
			<view class="flex-box align-center flex-between">
				<view class="title">
					可用优惠券
				</view>
				<view class="flex-box align-center" @click="change('')">
					<view class="fake-radio" :class="!couponID?'thmeBorder thmeBg':''" :style="{'--color': color}">
						<text class="iconfont icon-xuanzhong"></text>
					</view>
					<text>不使用优惠</text>
				</view>
			</view>
			<view class="contentListBox flex">
				<view class="couponList" v-for="(item,index) in list" :key="index" 
				@click="change(item.couponId)">
					<view class="checked" v-if='couponID == item.couponId' :style="{background:item.color}">
						<text class="iconfont icon-xuanzhong"></text>
					</view>
					<view class="couponListBg" :style="{background:item.color}"></view>
					<view class="circle top"></view>
					<view class="circle bot"></view>
					<view class="right_top statre1" :style="{'border-top-color':item.color}">
						<text>{{item.type==1?'抵用券':item.type==2?'折扣券':item.type==3?'兑换券':item.type==4?'免邮券':''}}</text>
					</view>
					<view class="couponContents">
						<view class="listLeft">
							<view class="couponTitle overflow" :style="{'color':item.color?item.color:''}">{{item.title}}</view>
							<view class="couponCont overflow" :style="{'color':item.color?item.color:''}">{{item.expiryDate}}</view>
							<view class="couponCont overflow" :style="{'color':item.color?item.color:''}">{{item.info}}</view>
						</view>
						<view class="listRight" :style="{
							'color':item.color?item.color:'',
							'border-left-color': item.color?item.color:''
							}">
							{{item.unit}}<text>{{item.price}}</text>{{item.priElse}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['list','couponID'],
		data() {
			return {
				color: getApp().globalData.color,
			};
		},
		methods:{
			close(){
				this.$emit('close')
			},
			change(couponId){
				this.$emit('change',couponId)
			}
		}
	}
</script>

<style lang="scss" scoped>
.contentsCoupon {
	transition: top 0.2s;
	z-index: 99;
}

	.selectShow {
		top: 0;
	}

	.couponTip {
		text-align: left;
		color: #999999;
	}
	@keyframes bottom {
		0% {bottom: -50vh;}
		100% {bottom: 0;}
	}
	.contentList {
		position: absolute;
		bottom: -50vh;
		animation: bottom .2s linear forwards;
		left: 0;
		height: 50%;
		border-radius: 10upx 10upx 0 0;
		background: #FFFFFF;
		width: 100%;
		z-index: 100;
		padding: 30upx;
		flex-direction: column;
		.title{
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.contentListBox {
		margin-top: 24rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.couponList {
		width: 100%;
		margin-bottom: 20upx;
		background: #FFFFFF;
		border-radius: 10upx;
		height: 160upx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 2upx 1upx rgba(240, 240, 240, 0.5);
		.icon-success{
			position: absolute;
			top: 50%;
			margin-top: -20rpx;
			left: 30rpx;
			color: red;
			font-size: 40rpx;
			z-index: 105;
		}
		.checked{
			position: absolute;
			left: -40rpx;
			top: 0;
			text-align: center;
			color: white;
			background-color: red;
			&::before{
				content: '';
				width: 100rpx;
				height: 40rpx;
				position: absolute;
				left: 0;
				top: 0;
				background-color: inherit;
				z-index: 1;
				transform: rotate(-45deg);
			}
			text{
				position: absolute;
				z-index: 2;
				left: 42rpx;
				top: 2rpx;
			}
		}
	}

	.listLeft {
		width: 490upx;
		height: 100%;
		float: left;
		line-height: 40upx;
	}

	.listRight {
		width: 140upx;
		height: 100%;
		float: right;
		border-left: 2upx dashed #DCDCDC;
		line-height: 120upx;
	}

	.circle {
		width: 20upx;
		height: 20upx;
		background: #FFFFFF;
		position: absolute;
		right: 150upx;
		z-index: 101;
		&.top{
			top: -10upx;
			border-radius: 50%;
		}
		&.bot{
			bottom: -10upx;
			border-radius: 50%;
		}
	}
	.couponTitle {
		color: #333333;
		font-size: 32upx;
		font-weight: bold;
	}

	.overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.couponCont {
		margin-top: 4upx;
		color: #999999;
		font-size: 20upx;
	}

	.listRight {
		color: #FF634C;
		text-align: center;
		font-size: 20upx;
	}

	.listRight text {
		font-size: 40upx;
		font-weight: bold;
		margin: 0 5upx;
	}

	.closecoupon {
		width: 66upx;
		height: 66upx;
		position: absolute;
		z-index: 100;
		top: 100%;
		left: 50%;
		margin-left: -33upx;
		margin-top: 60upx;
	}

	.right_top {
		width: 0;
		height: 0;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		border-top: 80upx solid #EC612A;
		border-left: 80upx solid transparent;
	}

	.right_top text {
		position: absolute;
		transform: rotate(45deg);
	}

	.statre text {
		left: -48upx;
		top: -70upx;
		font-size: 24upx;
	}

	.statre1 text {
		left: -50upx;
		top: -62upx;
		font-size: 16upx;
	}

	.couponListBg {
		width: 100%;
		height: 100%;
		opacity: 0.15;
		position: absolute;
		z-index: 100;
	}

	.couponContents {
		padding: 20upx;
		height: 100%;
	}
	
</style>
